import 'package:ati_package/core/utils/ati_assets.dart';
import 'package:ati_package/core/utils/ati_font.dart';
import 'package:ati_package/pages/common/ati_scaffold.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../../../core/utils/ati_color.dart';

class UserCollects extends StatefulWidget {
  const UserCollects({super.key});

  @override
  State<UserCollects> createState() => _UserCollectsState();
}

class _UserCollectsState extends State<UserCollects>
    with SingleTickerProviderStateMixin {
  TabController? tabController; // safer: allow null briefly
  final List<String> tabs = ['文字', '图片', '视频'];

  @override
  void initState() {
    super.initState();
    tabController = TabController(length: tabs.length, vsync: this);
  }

  @override
  void dispose() {
    tabController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AtiScaffold(
      title: '我的收藏',
      body: Column(
        children: [
          buildTabBar(),
          Expanded(
            // 👈 关键，让 TabBarView 填满剩余空间
            child: TabBarView(
              controller: tabController,
              children: [
                buildTextListContent('热门兑换内容'),
                buildImageListContent('精选好物内容'),
                buildVideoListContent('虚拟商品内容'),
              ],
            ),
          ),
        ],
      ),
    );
  }

  buildTabBar() {
    return Material(
      color: Colors.transparent,
      child: Container(
        height: 35.r,
        margin: EdgeInsets.symmetric(horizontal: 16.r, vertical: 12.5.r),
        child: TabBar(
          onTap: (value) {},
          controller: tabController,
          isScrollable: true,
          indicator: BoxDecoration(),
          tabAlignment: TabAlignment.start,
          dividerColor: Colors.transparent,
          indicatorColor: Colors.transparent, // 我们自己画 indicator
          splashFactory: NoSplash.splashFactory,
          overlayColor: WidgetStateProperty.all(Colors.transparent),
          labelPadding: EdgeInsets.only(
            right: 10.r,
            // top: 10.r,
          ), // ⚠️ 去掉 TabBar 自带 padding
          tabs: tabs.map((title) {
            final isSelected =
                tabController?.index == tabs.indexOf(title); // 当前是否选中

            return Tab(
              child: Container(
                padding: EdgeInsets.symmetric(
                  horizontal: 17.5.r,
                  vertical: 5.r,
                ), // ✅ 文字与边距
                decoration: BoxDecoration(
                  color: isSelected ? AtiColor.primary : Colors.white,
                  borderRadius: BorderRadius.circular(20.r),
                ),
                child: Text(
                  title,
                  style: TextStyle(
                    fontSize: 14.r,
                    fontWeight: FontWeight.w600,
                    color: isSelected ? Colors.white : AtiColor.textColor1,
                  ),
                ),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }

  Widget buildTextListContent(String title) {
    return Container(
      margin: EdgeInsets.only(left: 16.r, right: 16.r),

      child: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          return Container(
            padding: EdgeInsets.only(
              top: 8.r,
              bottom: 10.r,
              left: 16.r,
              right: 16.r,
            ),
            margin: EdgeInsets.only(bottom: 12.r),

            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(8.r),
            ),

            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                _buildUserIndsWidget(),
                SizedBox(height: 8.r),
                Text(
                  '我是文本搜索内容',
                  style: TextStyle(
                    fontSize: AtiFont.font14,
                    color: AtiColor.textColor1,
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }

  Widget buildImageListContent(String title) {
    return Container(
      margin: EdgeInsets.only(left: 16.r, right: 16.r),

      child: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          return Container(
            padding: EdgeInsets.only(
              top: 8.r,
              bottom: 10.r,
              left: 16.r,
              right: 16.r,
            ),
            margin: EdgeInsets.only(bottom: 12.r),

            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(8.r),
            ),

            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                _buildUserIndsWidget(),
                SizedBox(height: 8.r),
                ClipRRect(
                  borderRadius: BorderRadius.circular(8.r),
                  child: CachedNetworkImage(
                    imageUrl:
                        'https://picsum.photos/800/400?blur', // 👈 网络图片URL
                    width: 128.r,
                    height: 89.r,
                    fit: BoxFit.cover, // 保持比例填充
                    placeholder: (context, url) =>
                        const CircularProgressIndicator(), // 加载中
                    errorWidget: (context, url, error) =>
                        const Icon(Icons.error), // 加载失败
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }

  Widget buildVideoListContent(String title) {
    return Container(
      margin: EdgeInsets.only(left: 16.r, right: 16.r),

      child: ListView.builder(
        itemCount: 10,
        itemBuilder: (context, index) {
          return Container(
            padding: EdgeInsets.only(
              top: 8.r,
              bottom: 10.r,
              left: 16.r,
              right: 16.r,
            ),
            margin: EdgeInsets.only(bottom: 12.r),

            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(8.r),
            ),

            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                _buildUserIndsWidget(),
                SizedBox(height: 8.r),
                Stack(
                  children: [
                    // 封面图
                    ClipRRect(
                      borderRadius: BorderRadius.circular(8.r),
                      child: CachedNetworkImage(
                        imageUrl: 'https://picsum.photos/800/400?blur',
                        fit: BoxFit.cover,
                        // width: double.infinity,
                        width: 128.r,
                        height: 89.r,
                      ),
                    ),
                    // 半透明遮罩
                    Container(
                      width: 128.r,
                      height: 89.r,
                      color: Colors.black.withOpacity(0.2),
                    ),
                    // 播放按钮
                    Positioned(
                      left: 69.r - 13.r,
                      top: 44.5.r - 13.r,

                      child: Image.asset(
                        width: 26.r,
                        AtiAssets.atiPlayIcon,
                        package: 'ati_package',
                      ),
                    ),
                  ],
                ),
              ],
            ),
          );
        },
      ),
    );
  }

  _buildUserIndsWidget() {
    return Row(
      children: [
        CircleAvatar(
          radius: 17.5.r,
          backgroundImage: CachedNetworkImageProvider(
            'https://picsum.photos/800/400?blur',
          ),
        ),
        SizedBox(width: 8.r),
        Text('白日梦尽头', style: TextStyle(fontSize: AtiFont.font12)),
        Spacer(),
        Text(
          '2025/06/22  10:14:22',
          style: TextStyle(fontSize: AtiFont.font10, color: Color(0xFF666666)),
        ),
      ],
    );
  }

  Widget buildTabContent(String title) {
    return Center(
      child: Text(title, style: TextStyle(fontSize: 16.sp)),
    );
  }
}
